<!-- light-blue - v3.3.0 - 2016-03-08 -->

<!DOCTYPE html>
<html>
<head>
    <title>Light Blue - Responsive Admin Dashboard Template</title>

        <link href="css/application.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
    <script>
        /* yeah we need this empty stylesheet here. It's cool chrome & chromium fix
           chrome fix https://code.google.com/p/chromium/issues/detail?id=167083
                      https://code.google.com/p/chromium/issues/detail?id=332189
        */
    </script>
</head>
<body>
    <div class="logo">
        <h4><a href="index.html">Light <strong>Blue</strong></a></h4>
    </div>
        <nav id="sidebar" class="sidebar nav-collapse collapse">
            <ul id="side-nav" class="side-nav">
                <li class="">
                    <a href="index.html"><i class="fa fa-home"></i> <span class="name">Dashboard</span></a>
                </li>
                <li class="panel ">
                    <a class="accordion-toggle collapsed" data-toggle="collapse"
                       data-parent="#side-nav" href="#forms-collapse"><i class="fa fa-pencil"></i> <span class="name">Forms</span></a>
                    <ul id="forms-collapse" class="panel-collapse collapse ">
                        <li class=""><a href="form_account.html">Account</a></li>
                        <li class=""><a href="form_article.html">Article</a></li>
                        <li class=""><a href="form_elements.html">Elements</a></li>
                        <li class=""><a href="form_validation.html">Validation</a></li>
                        <li class=""><a href="form_wizard.html">Wizard</a></li>
                    </ul>
                </li>
                <li class="panel ">
                    <a class="accordion-toggle collapsed" data-toggle="collapse"
                       data-parent="#side-nav" href="#stats-collapse"><i class="fa fa-area-chart"></i> <span class="name">Statistics</span></a>
                    <ul id="stats-collapse" class="panel-collapse collapse ">
                        <li class=""><a href="stat_statistics.html">Stats</a></li>
                        <li class=""><a href="stat_charts.html">Charts</a></li>
                        <li class=""><a href="stat_realtime.html">Realtime</a></li>
                    </ul>
                </li>
                <li class="panel ">
                    <a class="accordion-toggle collapsed" data-toggle="collapse"
                       data-parent="#side-nav" href="#ui-collapse"><i class="fa fa-magic"></i> <span class="name">User Interface</span></a>
                    <ul id="ui-collapse" class="panel-collapse collapse ">
                        <li class=""><a href="ui_buttons.html">Buttons</a></li>
                        <li class=""><a href="ui_dialogs.html">Dialogs</a></li>
                        <li class=""><a href="ui_notifications.html">Notifications</a></li>
                        <li class=""><a href="ui_icons.html">Icons</a></li>
                        <li class=""><a href="ui_tabs.html">Tabs</a></li>
                        <li class=""><a href="ui_accordion.html">Accordion</a></li>
                    </ul>
                </li>
                <li class="panel ">
                    <a class="accordion-toggle collapsed" data-toggle="collapse"
                       data-parent="#side-nav" href="#components-collapse"><i class="fa fa-tree"></i> <span class="name">Components</span></a>
                    <ul id="components-collapse" class="panel-collapse collapse ">
                        <li class=""><a href="component_calendar.html">Calendar</a></li>
                        <li class=""><a href="component_maps.html" data-no-pjax>Maps</a></li>
                        <li class=""><a href="component_gallery.html">Gallery</a></li>
                        <li class=""><a href="component_fileupload.html" data-no-pjax>Fileupload</a></li>
                        <li class=""><a href="component_bootstrap.html">Bootstrap</a></li>
                        <li class=""><a href="component_list_groups.html">List Groups</a></li>
                    </ul>
                </li>
                <li class="panel ">
                    <a class="accordion-toggle collapsed" data-toggle="collapse"
                       data-parent="#side-nav" href="#tables-collapse"><i class="fa fa-cog"></i> <span class="name">Tables</span></a>
                    <ul id="tables-collapse" class="panel-collapse collapse ">
                        <li class=""><a href="tables_static.html">Static <sup class="text-danger fw-bold">upd</sup></a></li>
                        <li class=""><a href="tables_dynamic.html">Dynamic</a></li>
                    </ul>
                </li>
                <li class="panel ">
                    <a class="accordion-toggle collapsed" data-toggle="collapse"
                       data-parent="#side-nav" href="#grid-collapse"><i class="fa fa-th"></i> <span class="name">Widgets</span></a>
                    <ul id="grid-collapse" class="panel-collapse collapse ">
                        <li class=""><a href="grid_basic.html">Basic</a></li>
                        <li class=""><a href="grid_live.html">Live</a></li>
                    </ul>
                </li>
                <li class="panel active">
                    <a class="accordion-toggle " data-toggle="collapse"
                       data-parent="#side-nav" href="#special-collapse"><i class="fa fa-leaf"></i> <span class="name">Special</span></a>
                    <ul id="special-collapse" class="panel-collapse collapse in">
                        <li class=""><a href="special_search.html">Search <sup class="text-warning fw-bold">new</sup></a></li>
                        <li class=""><a href="special_invoice.html">Invoice</a></li>
                        <li class="active"><a href="special_inbox.html">Inbox &nbsp; <span class="label label-important">3</span></a></li>
                        <li><a target="_blank" href="login.html">Login</a></li>
                        <li><a target="_blank" href="error.html">Error Page</a></li>
                        <li><a href="landing.html" data-no-pjax>Landing</a></li>
                        <li><a href="../light/index.html" data-no-pjax title="Light Blue Transparent Light version">Light <sup class="text-warning fw-bold">new</sup></a></li>
                        <li><a href="../white/index.html" data-no-pjax title="Light Blue Transparent White version">White <sup class="text-warning fw-bold">new</sup></a></li>
                    </ul>
                </li>
                <li class="panel">
                    <a class="accordion-toggle collapsed" data-toggle="collapse"
                       data-parent="#side-nav" href="#menu-levels-collapse"><i class="fa fa-folder-open"></i> <span class="name">Menu Levels</span></a>
                    <ul id="menu-levels-collapse" class="panel-collapse collapse">
                        <li><a href="#">Item 1.1</a></li>
                        <li><a href="#">Item 1.2</a></li>
                        <li class="panel">
                            <a class="accordion-toggle collapsed" data-toggle="collapse"
                               data-parent="#menu-levels-collapse" href="#sub-menu-1-collapse">Item 1.3</a>
                            <ul id="sub-menu-1-collapse" class="panel-collapse collapse">
                                <li class="panel">
                                    <a class="accordion-toggle collapsed" data-toggle="collapse"
                                       data-parent="#sub-menu-1-collapse" href="#sub-menu-3-collapse">Item 2.1</a>
                                    <ul id="sub-menu-3-collapse" class="panel-collapse collapse">
                                        <li><a href="#">Item 3.1</a></li>
                                        <li><a href="#">Item 3.2</a></li>
                                        <li><a href="#">Item 3.3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Item 2.2</a></li>
                                <li class="panel">
                                    <a class="accordion-toggle collapsed" data-toggle="collapse"
                                       data-parent="#sub-menu-1-collapse" href="#sub-menu-2-collapse">Item 2.3</a>
                                    <ul id="sub-menu-2-collapse" class="panel-collapse collapse">
                                        <li><a href="#">Item 3.4</a></li>
                                        <li><a href="#">Item 3.5</a></li>
                                        <li><a href="#">Item 3.6</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="visible-xs">
                    <a href="login.html"><i class="fa fa-sign-out"></i> <span class="name">Sign Out</span></a>
                </li>
            </ul>
        
            <h5 class="sidebar-nav-title">Labels <a class="action-link" href="#"><i class="glyphicon glyphicon-plus"></i></a></h5>
            <!-- some styled links in sidebar. ready to use as links to email folders, projects, groups, etc -->
            <ul class="sidebar-labels">
                <li>
                    <a href="#">
                        <!-- yep, .circle again -->
                        <i class="fa fa-circle text-warning"></i>
                        <span class="label-name">My Recent</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-circle text-gray"></i>
                        <span class="label-name">Starred</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-circle text-danger"></i>
                        <span class="label-name">Background</span>
                    </a>
                </li>
            </ul>
        
            <h5 class="sidebar-nav-title">Projects</h5>
            <!-- A place for sidebar notifications & alerts -->
            <div class="sidebar-alerts">
                <div class="alert fade in">
                    <a href="#" class="close" data-dismiss="alert" aria-hidden="true">&times;</a>
                    <span class="text-white fw-semi-bold">Sales Report</span> <br>
                    <div class="progress progress-xs mt-xs mb-0">
                        <div class="progress-bar progress-bar-gray-light" style="width: 16%"></div>
                    </div>
                    <small>Calculating x-axis bias... 65%</small>
                </div>
                <div class="alert fade in">
                    <a href="#" class="close" data-dismiss="alert" aria-hidden="true">&times;</a>
                    <span class="text-white fw-semi-bold">Personal Responsibility</span> <br>
                    <div class="progress progress-xs mt-xs mb-0">
                        <div class="progress-bar progress-bar-danger" style="width: 23%"></div>
                    </div>
                    <small>Provide required notes</small>
                </div>
            </div>
        </nav>    <div class="wrap">
        <header class="page-header">
            <div class="navbar">
                <ul class="nav navbar-nav navbar-right pull-right">
                    <li class="visible-phone-landscape">
                        <a href="#" id="search-toggle">
                            <i class="fa fa-search"></i>
                        </a>
                    </li>
                    <li class="dropdown">
                        <a href="#" title="Messages" id="messages"
                           class="dropdown-toggle"
                           data-toggle="dropdown">
                            <i class="glyphicon glyphicon-comment"></i>
                        </a>
                        <ul id="messages-menu" class="dropdown-menu messages" role="menu">
                            <li role="presentation">
                                <a href="#" class="message">
                                    <img src="img/1.png" alt="">
                                    <div class="details">
                                        <div class="sender">Jane Hew</div>
                                        <div class="text">
                                            Hey, John! How is it going? ...
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="message">
                                    <img src="img/2.png" alt="">
                                    <div class="details">
                                        <div class="sender">Alies Rumiancaŭ</div>
                                        <div class="text">
                                            I'll definitely buy this template
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="message">
                                    <img src="img/3.png" alt="">
                                    <div class="details">
                                        <div class="sender">Michał Rumiancaŭ</div>
                                        <div class="text">
                                            Is it really Lore ipsum? Lore ...
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="text-align-center see-all">
                                    See all messages <i class="fa fa-arrow-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" title="8 support tickets"
                           class="dropdown-toggle"
                           data-toggle="dropdown">
                            <i class="glyphicon glyphicon-globe"></i>
                            <span class="count">8</span>
                        </a>
                        <ul id="support-menu" class="dropdown-menu support" role="menu">
                            <li role="presentation">
                                <a href="#" class="support-ticket">
                                    <div class="picture">
                                        <span class="label label-important"><i class="fa fa-bell-o"></i></span>
                                    </div>
                                    <div class="details">
                                        Check out this awesome ticket
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="support-ticket">
                                    <div class="picture">
                                        <span class="label label-warning"><i class="fa fa-question-circle"></i></span>
                                    </div>
                                    <div class="details">
                                        "What is the best way to get ...
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="support-ticket">
                                    <div class="picture">
                                        <span class="label label-success"><i class="fa fa-tag"></i></span>
                                    </div>
                                    <div class="details">
                                        This is just a simple notification
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="support-ticket">
                                    <div class="picture">
                                        <span class="label label-info"><i class="fa fa-info-circle"></i></span>
                                    </div>
                                    <div class="details">
                                        12 new orders has arrived today
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="support-ticket">
                                    <div class="picture">
                                        <span class="label label-important"><i class="fa fa-plus"></i></span>
                                    </div>
                                    <div class="details">
                                        One more thing that just happened
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="text-align-center see-all">
                                    See all tickets <i class="fa fa-arrow-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li class="hidden-xs">
                        <a href="#" id="settings"
                           title="Settings"
                           data-toggle="popover"
                           data-placement="bottom">
                            <i class="glyphicon glyphicon-cog"></i>
                        </a>
                    </li>
                    <li class="hidden-xs dropdown">
                        <a href="#" title="Account" id="account"
                           class="dropdown-toggle"
                           data-toggle="dropdown">
                            <i class="glyphicon glyphicon-user"></i>
                        </a>
                        <ul id="account-menu" class="dropdown-menu account" role="menu">
                            <li role="presentation" class="account-picture">
                                <img src="img/2.png" alt="">
                                Philip Daineka
                            </li>
                            <li role="presentation">
                                <a href="form_account.html" class="link">
                                    <i class="fa fa-user"></i>
                                    Profile
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="component_calendar.html" class="link">
                                    <i class="fa fa-calendar"></i>
                                    Calendar
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="link">
                                    <i class="fa fa-inbox"></i>
                                    Inbox
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="visible-xs">
                        <a href="#"
                           class="btn-navbar"
                           data-toggle="collapse"
                           data-target=".sidebar"
                           title="">
                            <i class="fa fa-bars"></i>
                        </a>
                    </li>
                    <li class="hidden-xs"><a href="login.html"><i class="glyphicon glyphicon-off"></i></a></li>
                </ul>
                <form id="search-form" class="navbar-form pull-right" role="search">
                    <input type="search" class="form-control search-query" placeholder="Search...">
                </form>
                <div class="notifications pull-right">
                    <div class="alert pull-right">
                        <a href="#" class="close ml-xs" data-dismiss="alert">&times;</a>
                        <i class="fa fa-info-circle mr-xs"></i> Check out Light Blue <a id="notification-link" href="#">settings</a> on the right!
                    </div>
                </div>
            </div>
        </header>        <div class="content container">
        <div class="alert alert-warning alert-sm pull-right no-margin animated bounceInLeft hide" id="app-alert">
            <button type="button" class="ml-lg close" data-dismiss="alert" aria-hidden="true">×</button>
            Hey! This is a <span class="fw-semi-bold">real app</span> with CRUD and Search functions. Have fun!
        </div>
        <h2 class="page-title">Inbox <small>Ready-to-use client-side application</small></h2>
        <div class="row">
            <div class="col-md-3 col-lg-2">
                <a class="btn btn-danger btn-block" id="compose-btn" href="#">Compose</a>

                <ul class="nav nav-pills nav-stacked nav-email-folders mt" id="folders-list">
                    <li class="active">
                        <a href="inbox.html">
                            <span class="badge pull-right">2</span>
                            Inbox
                        </a>
                    </li>
                    <li><a href="#">Starred</a></li>
                    <li><a href="#">Sent Mail</a></li>
                    <li>
                        <a href="#">
                            <span class="badge pull-right">3</span>
                            Draft
                        </a>
                    </li>
                    <li><a href="#">Trash</a></li>
                </ul>
                <h5 class="mt">QUICK VIEW</h5>
                <ul class="nav nav-pills nav-stacked nav-email-folders mb-lg">
                    <li><a href="#"><i class="fa fa-circle text-danger pull-right"></i> Work </a></li>
                    <li><a href="#"><i class="fa fa-circle text-white pull-right"></i> Private </a></li>
                    <li><a href="#"><i class="fa fa-circle text-warning pull-right"></i> Saved </a></li>
                </ul>
            </div>
            <div class="col-md-9 col-lg-10">
                <div class="clearfix mb-xs">
                    <a class="btn btn-transparent btn-sm width-50 pull-left hide" id="back-btn" href="special_inbox.html">
                        <i class="fa fa-angle-left fa-lg"></i>
                    </a>
                    <div class="pull-right" id="folder-stats">
                        <p class="widget-email-count">Showing 1 - 10 of 96 messages</p>
                        <ul class="pagination pagination-sm widget-email-pagination">
                            <li class="prev disabled"><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li class="next"><a href="#"><i class="fa fa-chevron-right"></i></a></li>
                        </ul>
                    </div>
                </div>
                <section class="widget widget-email">
                    <header id="widget-email-header" class="mb-sm">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="btn-group">
                                    <a class="btn btn-default btn-sm dropdown-toggle" href="#" data-toggle="dropdown">
                                        Select
                                        <i class="fa fa-angle-down "></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a id="select-all" href="#">All</a></li>
                                        <li><a id="select-none" href="#">None</a></li>
                                        <li class="divider"></li>
                                        <li><a id="select-read" href="#">Read</a></li>
                                        <li><a id="select-unread" href="#">Unread</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <a class="btn btn-sm btn-default dropdown-toggle" href="#" data-toggle="dropdown">
                                        Actions
                                        <i class="fa fa-angle-down "></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a id="reply" href="#">Reply</a></li>
                                        <li><a id="forward" href="#">Forward</a></li>
                                        <li><a id="archive" href="#">Archive</a></li>
                                        <li class="divider"></li>
                                        <li><a id="mark-as-read" href="#">Mark As Read</a></li>
                                        <li><a id="mark-as-unread" href="#">Mark As Unread</a></li>
                                        <li class="divider"></li>
                                        <li><a id="delete" href="#">Delete</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <input class="form-control input-transparent input-sm width-200 pull-right" id="mailbox-search" type="text" placeholder="Search Messages">
                            </div>
                        </div>
                    </header>
                    <div class="widget-table-overflow" id="mailbox-content">
                        <table class="table table-striped table-emails table-hover table-lg mb-sm" id="folder-view" >
                            <thead>
                            <tr>
                                <th colspan="3" id="folder-actions">
                                    <div class="checkbox">
                                        <input id="toggle-all" type="checkbox">
                                        <label for="toggle-all"></label>
                                    </div>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="unread">
                                <td>
                                    <div class="checkbox">
                                        <input type="checkbox" id="checkbox1">
                                        <label for="checkbox1"></label>
                                    </div>
                                </td>
                                <td class="favorite"><span class="starred"><i class="fa fa-star"></i></span></td>
                                <td class="name hidden-xs">Philip Horbacheuski</td>
                                <td class="subject">Hi, Welcome to Google Mail</td>
                                <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                                <td class="date">May 19</td>
                            </tr><tr class="unread">
                                <td>
                                    <div class="checkbox">
                                        <input type="checkbox" id="checkbox2">
                                        <label for="checkbox2"></label>
                                    </div>
                                </td>
                                <td class="favorite"><span class="starred"><i class="fa fa-star-o"></i></span></td>
                                <td class="name hidden-xs">StackExchange</td>
                                <td class="subject">New Python questions for this week!</td>
                                <td class="hidden-xs"></td>
                                <td class="date">Aug 14</td>
                            </tr><tr class="">
                                <td>
                                    <div class="checkbox">
                                        <input type="checkbox" id="checkbox3">
                                        <label for="checkbox3"></label>
                                    </div>
                                </td>
                                <td class="favorite"><span class="starred"><i class="fa fa-star-o"></i></span></td>
                                <td class="name hidden-xs">notifications@facebook.com</td>
                                <td class="subject">Someone just commented on your photo!</td>
                                <td class="hidden-xs"></td>
                                <td class="date">Aug 7</td>
                            </tr><tr class="unread">
                                <td>
                                    <div class="checkbox">
                                        <input type="checkbox" id="checkbox4">
                                        <label for="checkbox4"></label>
                                    </div>
                                </td>
                                <td class="favorite"><span class="starred"><i class="fa fa-star"></i></span></td>
                                <td class="name hidden-xs">Twitter</td>
                                <td class="subject">@hackernews is now following you on Twitter</td>
                                <td class="hidden-xs"></td>
                                <td class="date">Jul 31</td>
                            </tr><tr class="">
                                <td>
                                    <div class="checkbox">
                                        <input type="checkbox" id="checkbox5">
                                        <label for="checkbox5"></label>
                                    </div>
                                </td>
                                <td class="favorite"><span class="starred"><i class="fa fa-star-o"></i></span></td>
                                <td class="name hidden-xs">Nikola Foley</td>
                                <td class="subject">Quiet led own cause three him</td>
                                <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                                <td class="date">Jul 22</td>
                            </tr><tr class="">
                                <td>
                                    <div class="checkbox">
                                        <input type="checkbox" id="checkbox6">
                                        <label for="checkbox6"></label>
                                    </div>
                                </td>
                                <td class="favorite"><span class="starred"><i class="fa fa-star-o"></i></span></td>
                                <td class="name hidden-xs">Ernst Hardy</td>
                                <td class="subject">Raising say express had chiefly detract demands she</td>
                                <td class="hidden-xs"></td>
                                <td class="date">Jul 15</td>
                            </tr><tr class="">
                                <td>
                                    <div class="checkbox">
                                        <input type="checkbox" id="checkbox7">
                                        <label for="checkbox7"></label>
                                    </div>
                                </td>
                                <td class="favorite"><span class="starred"><i class="fa fa-star-o"></i></span></td>
                                <td class="name hidden-xs">LinkedIn</td>
                                <td class="subject">Jobs you may be interested in</td>
                                <td class="hidden-xs"></td>
                                <td class="date">Jul 12</td>
                            </tr><tr class="">
                                <td>
                                    <div class="checkbox">
                                        <input type="checkbox" id="checkbox8">
                                        <label for="checkbox8"></label>
                                    </div>
                                </td>
                                <td class="favorite"><span class="starred"><i class="fa fa-star"></i></span></td>
                                <td class="name hidden-xs">Naevius Victorsson</td>
                                <td class="subject">Front no party young abode state up</td>
                                <td class="hidden-xs"></td>
                                <td class="date">Jul 11</td>
                            </tr></tbody>
                        </table>
                    </div>
                </section>
            </div>
        </div>
        </div>
        <div class="loader-wrap hiding hide">
            <i class="fa fa-circle-o-notch fa-spin"></i>
        </div>
    </div>
<!-- common libraries. required for every page-->
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/jquery-pjax/jquery.pjax.js"></script>
<script src="lib/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>
<script src="lib/widgster/widgster.js"></script>
<script src="lib/underscore/underscore.js"></script>

<!-- common application js -->
<script src="js/app.js"></script>
<script src="js/settings.js"></script>

<!-- common templates -->
<script type="text/template" id="settings-template">
    <div class="setting clearfix">
        <div>Sidebar on the</div>
        <div id="sidebar-toggle" class="pull-left btn-group" data-toggle="buttons-radio">
            <% onRight = sidebar == 'right'%>
            <button type="button" data-value="left" class="btn btn-sm btn-default <%= onRight? '' : 'active' %>">Left</button>
            <button type="button" data-value="right" class="btn btn-sm btn-default <%= onRight? 'active' : '' %>">Right</button>
        </div>
    </div>
    <div class="setting clearfix">
        <div>Sidebar</div>
        <div id="display-sidebar-toggle" class="pull-left btn-group" data-toggle="buttons-radio">
            <% display = displaySidebar%>
            <button type="button" data-value="true" class="btn btn-sm btn-default <%= display? 'active' : '' %>">Show</button>
            <button type="button" data-value="false" class="btn btn-sm btn-default <%= display? '' : 'active' %>">Hide</button>
        </div>
    </div>
    <div class="setting clearfix">
        <div>Light Version</div>
        <div>
            <a href="../light/index.html" class="btn btn-sm btn-default">&nbsp; Switch &nbsp;   <i class="fa fa-angle-right"></i></a>
        </div>
    </div>
    <div class="setting clearfix">
        <div>White Version</div>
        <div>
            <a href="../white/index.html" class="btn btn-sm btn-default">&nbsp; Switch &nbsp;   <i class="fa fa-angle-right"></i></a>
        </div>
    </div>
</script>

<script type="text/template" id="sidebar-settings-template">
    <% auto = sidebarState == 'auto'%>
    <% if (auto) {%>
    <button type="button"
            data-value="icons"
            class="btn-icons btn btn-transparent btn-sm">Icons</button>
    <button type="button"
            data-value="auto"
            class="btn-auto btn btn-transparent btn-sm">Auto</button>
    <%} else {%>
    <button type="button"
            data-value="auto"
            class="btn btn-transparent btn-sm">Auto</button>
    <% } %>
</script>

    <!-- page specific scripts -->
        <!-- page specific libs -->
        <script src="lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
        <script src="lib/underscore/underscore.js"></script>
        <script src="lib/backbone/backbone.js"></script>
        <script src="lib/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js"></script>

        <!-- page application js -->
        <script src="js/inbox.js"></script>


        <!-- page templates -->
        <script type="text/template" id="folders-view-template">
            <table class="table table-striped table-emails table-hover table-lg mb-sm">
                <thead>
                <tr>
                    <th colspan="3">
                        <div class="checkbox">
                            <input type="checkbox" id="toggle-all">
                            <label for="toggle-all"></label>
                        </div>
                    </th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </script>

        <script type="text/template" id="folder-template">
            <a href="#">
                <% if (unread) {%><span class="badge pull-right"><%= unread %></span><% } %>
                <%= name %>
            </a>
        </script>

        <script type="text/template" id="mail-item-template">
            <td>
                <div class="checkbox">
                    <% checkboxId = Math.round(Math.random()*2344523) %>
                    <input class="selected-checkbox" type="checkbox" id="checkbox<%= checkboxId %>" <%= selected ? 'checked="checked"' : ''%> />
                    <label for="checkbox<%= checkboxId %>"></label>
                </div>
            </td>
            <td class="favorite"><span class="starred"><i class="<%= starred ? 'fa fa-star' : 'fa fa-star-o'%>"></i></span></td>
            <td class="name hidden-xs"><%= sender ? sender : senderMail %></td>
            <td class="subject"><%= subject %></td>
            <td class="hidden-xs"><% if (attachment) {%><i class="fa fa-paperclip"><% } %></i></td>
            <td class="date"><%= this.formatDate(timestamp) %></td>
        </script>

        <script type="text/template" id="email-view-template">
            <div class="email-details clearfix">
                <div class="email-details-content">
            <span class="thumb thumb-sm pull-left">
                <img class="img-circle" src="img/13.png" alt="<%= sender %>" title="<%= sender %>">
            </span>
                    <div class="pull-left">
                        <strong><%= sender ? sender : senderMail %></strong>
                        <% if (senderMail) { %>
                        <span class="email">&lt;<%= senderMail %>&gt;</span>
                        <% } %>
                        <span class="receiver">to Wrapbootstrap</span>
                    </div>
                    <div class="email-actions pull-right">
                        <div class="btn-group">
                            <button id="email-opened-reply" class="btn btn-sm btn-transparent">
                                <i class="fa fa-reply mr-xs"></i> Reply
                            </button>
                            <button class="btn btn-sm btn-transparent dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-angle-down"></i>
                            </button>
                            <ul class="dropdown-menu pull-right">
                                <li><a href="#">Reply</a></li>
                                <li><a href="#">Forward</a></li>
                                <li><a href="#">Print</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><i class="fa fa-ban mr-xs"></i> Spam</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-trash mr-xs"></i> Delete</a></li>
                            </ul>
                        </div>
                    </div>
                    <time class="email-date pull-right">
                        <%= this.formatDate(timestamp) %>
                    </time>
                </div>
            </div>
            <div class="email-body">
                <%= body %>
            </div>
            <% if (attachment) { %>
            <%
            attachments = attachments.split(",");
            attachmentsCount = attachments.length
            %>
            <div class="email-attachments">
                <div class="row">
                    <div class="col-sm-6">
                        <hr>
                        <p class="details"><strong><%= attachmentsCount %> attachments</strong> &nbsp;-&nbsp; <a href="#">Download all attachments</a>
                            &nbsp;&nbsp;&nbsp;<a href="#">View all Images</a></p>
                        <% i = 1 %>
                        <% _.each(attachments, function(attachment){ %>
                        <% size = Math.round(Math.random()*1000) %>
                        <section class="attachment">
                            <img class="img-responsive" src="<%= attachment %>" alt=""/>
                            <h5 class="title">some-cool-image<%= i++ %>.jpg</h5>
                            <p class="details">
                                <%= size %>K  &nbsp;&nbsp;
                                <a href="#">View</a> &nbsp;&nbsp;
                                <a href="#">Download</a>
                            </p>
                        </section>
                        <% }); %>
                    </div>
                </div>
            </div>
            <% } %>
        </script>

        <script type="text/template" id="compose-view-template">
            <form id="email-compose" class="form-email-compose" method="get" action="inbox.html">
                <div class="form-group">
                    <input type="email" id="input-to" placeholder="To" class="input-transparent form-control"
                           value="<%= receiver %>">
                </div>
                <div class="form-group">
                    <input type="text" id="input-subject" placeholder="Subject" class="input-transparent form-control"
                           value="<%= subject %>">
                </div>
                <div class="form-group">
                    <textarea rows="10" class="form-control input-transparent" id="wysiwyg" placeholder="Message"><%- body %></textarea>
                </div>
                <div class="clearfix">
                    <div class="btn-toolbar pull-right">
                        <button type="reset" id="compose-discard-button" class="btn btn-transparent">Discard</button>
                        <button type="button" id="compose-save-button" class="btn btn-transparent">&nbsp;&nbsp;Save&nbsp;&nbsp;</button>
                        <button type="submit" id="compose-send-button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;Send&nbsp;&nbsp;&nbsp;</button>
                    </div>
                </div>
            </form>
        </script>

        <script type="text/template" id="email-list-view-header-template">
            <div class="row">
                <div class="col-sm-6">
                    <div class="btn-group">
                        <a class="btn btn-default btn-sm dropdown-toggle" href="#" data-toggle="dropdown">
                            Select
                            <i class="fa fa-angle-down "></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a id="select-all" href="#">All</a></li>
                            <li><a id="select-none" href="#">None</a></li>
                            <li class="divider"></li>
                            <li><a id="select-read" href="#">Read</a></li>
                            <li><a id="select-unread" href="#">Unread</a></li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-sm btn-default dropdown-toggle" href="#" data-toggle="dropdown">
                            Actions
                            <i class="fa fa-angle-down "></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a id="reply" href="#">Reply</a></li>
                            <li><a id="forward" href="#">Forward</a></li>
                            <li><a id="archive" href="#">Archive</a></li>
                            <li class="divider"></li>
                            <li><a id="mark-as-read" href="#">Mark As Read</a></li>
                            <li><a id="mark-as-unread" href="#">Mark As Unread</a></li>
                            <li class="divider"></li>
                            <li><a id="delete" href="#">Delete</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-6">
                    <input class="form-control input-transparent input-sm width-200 pull-right" id="mailbox-search" type="text" placeholder="Search Messages">
                </div>
            </div>
        </script>

</body>
</html>